<template>
  <div class="container">


    <input  v-model="qrCodeFirst"    style="width: 100% ;height: 50px; font-size: 16px;margin-bottom: 12px" @change="onQrCodeFirst"/>
    <div style="width: 100%; display: flex;justify-content: space-between ; border-bottom: 1px solid #f7f7f7">
      <span style="color: green"> {{ openStatus ? '设备链接成功' : '设备链接失败' }}</span>

      <button @click="onStart()" style="width: 200px ;
       height:30px;background: #49d9fe ; border-radius: 4px;
font-size: 14px; border: 1px solid #83b8ff;">打开串口</button>

    </div>

    <div style="width: 100%; padding: 20px;display: flex;justify-content: space-between">
      <div style="width: 400px">

        <div id="qr-section" class="qr-section">
          <p>
            <qr-code ref="qrCode" :value="qrCodeText" :size="260" level="H"/>
          </p>
          <p class="num">{{ sourceText }}</p>
        </div>
        <button style=" width: 300px ; margin-top: 20px;
       height:50px;background: rebeccapurple ; border-radius: 4px; color: whitesmoke;
font-size: 14px; border: 1px solid #83b8ff;" class="download" @click="downloadFile()">下载图片
        </button>
      </div>


      <div style="flex: 1 ;background: beige ; padding: 20px; margin-left: 20px ;font-size: 20px">
        <p>设备序列号: </p>
        <p>{{ sourceText }}</p>
        <p>网址信息:</p>
        <p> {{ qrCodeText }}</p>

      </div>


    </div>

    {{ commText }}
  </div>
</template>
<script setup>
import QrCode from 'qrcode.vue'
import html2canvas from 'html2canvas'
import {IoComService} from "./service/IoComService.ts";
import {onMounted, ref, watch} from "vue";


let ioc = new IoComService();
const openStatus = ref(false)
const sourceText = ref(null)
const qrCodeText = ref('')

const commText = ref('')

const qrCodeFirst = ref('https://www.kangleiot.cn/nd/device?deviceNo=')

function keepNumbers(str) {
  return str.replace(/\D/g, "");
}

const makeQrcode = (data) => {
  commText.value = data
  let arr = data.split("OK");
  const xt = arr[0].replace("AT+GSN=1", "").replace("' '", "");
  const arr2 = xt.split(":");
  const rs = keepNumbers(arr2[1])
  sourceText.value = rs
  qrCodeText.value = qrCodeFirst.value + rs


}




const sendData = () => setTimeout(() => ioc.sendCmd(), 500)


watch(() => openStatus.value, (x) => {
  if (x) sendData()
  else qrCodeText.value = null
})

const onStart = async () => {

  await ioc.onOpen(openStatus)
  await ioc.onRead(makeQrcode)
}


const downloadImage = (url) => {
  const link = document.createElement('a') // 创建一个超链接对象实例
  link.href = url
  link.setAttribute('download', sourceText.value + '.png')
  link.click()

}

const  onQrCodeFirst = (e)=> window.localStorage.setItem("qrCodeFirst",qrCodeFirst.value)


// 二维码
const downloadFile = () => {

  window.pageYoffset = 0
  document.documentElement.scrollTop = 0
  document.body.scrollTop = 0
  const canvasBox = document.getElementById('qr-section')
  html2canvas(canvasBox).then(canvas => {
    const dataURL = canvas.toDataURL('image/jpg')
    downloadImage(dataURL)
  })
}

onMounted(() =>{
  qrCodeFirst.value =   window.localStorage.getItem('qrCodeFirst')
  onStart()

  console.log(openStatus.value)
  if (openStatus.value===false){
    setTimeout(onStart,1000)
  }

})
</script>


<style>
.qr-section {
  padding-top: 12px;
  padding-bottom: 6px;
  width: 300px;
  text-align: center;
  border-radius: 8px;
  background: #FFFFFF;
}

.num {
  margin-top: -12px;
  font-size: 18px;
}
</style>